/**
 * Created by Ysssssss on 2021/4/30.
 */

import React, { PureComponent } from 'react'
import {Tabs, Button} from "antd";
import { withRouter } from 'react-router-dom'
import WechatDesignPageSvg from '@assets/svg/wechatDesignPage.svg'
import AlipayDesignPageSvg from '@assets/svg/alipayDesignPage.svg'
import TikTokDesignPageSvg from '@assets/svg/tikTokDesignPage.svg'
import {RightOutlined} from "@ant-design/icons";
import {getBilinInfo} from "@utils/localStorage";
import {connect} from "react-redux";
import {PLATFORM_MAP} from "@constants/PlatformList";

const brandIntro = {
    global: {
        type: 'global',
        title: '全局风格',
        content: '自定义商城主题色，塑造品牌风格'
    },
    special: {
        type: 'special',
        title: '店铺主页',
        content: '组件自由组合，设计让人眼前一亮第一印象'
    },
    owner: {
        type: 'owner',
        title: '个人中心',
        content: '入口配置自定义，展示个性化样式'
    },
    'start-page': {
        type: 'owner',
        title: '启动页',
        content: '传递品牌文化与格调，加强用户对品牌的直观印象'
    },
    cart: {
        type: 'cart',
        title: '购物车',
        content: '增加商品宣传入口，多场景引流'
    }
}

const agentIntro = {
    home: {
        type: 'home',
        title: '店铺首页',
        content: '组件自由组合，设计让人眼前一亮第一印象'
    },
    cart: {
        type: 'cart',
        title: '购物车',
        content: '增加商品宣传入口，多场景引流'
    },
    special: {
        type: 'special',
        title: '商品分类',
        content: '在商品分类页面设置广告，增加商品宣传场景'
    },
    owner: {
        type: 'owner',
        title: '个人中心',
        content: '入口配置自定义，展示个性化样式'
    }
}

const storeIntro = {
    special: {
        type: 'special',
        title: '店铺专区',
        content: '设置活动宣传广告，吸引关注'
    }
}


@connect(({ user }) => ({
    userInfoInStore: user.userInfoInStore
}))
@withRouter
class ShoppingMallDesignPage extends PureComponent {
    goDesignDetailPage (platformId, type) {
        const { history } = this.props
        history.push(`/shopping-mall/design/${platformId}/detail${type ? `/${type}` : ''}`)
    }

    render () {
        const { userInfoInStore } = this.props
        const pStoreId = getBilinInfo('storeId') || 0
        const { biz_type: bizType } = userInfoInStore
        let intro = []
        let defaultType = ''
        if (pStoreId && bizType === 'agent') {
            intro = [
                [agentIntro.home, agentIntro.cart, agentIntro.owner],
                [agentIntro.home, agentIntro.special, agentIntro.cart],
                [agentIntro.home, agentIntro.cart, agentIntro.owner],
            ]
            defaultType = 'home'
        } else if (pStoreId) {
            intro = [[storeIntro.special], [storeIntro.special], [storeIntro.special]]
            defaultType = 'special'
        } else {
            intro = [
                [brandIntro.global, brandIntro.special, brandIntro.owner],
                [brandIntro["start-page"], brandIntro.special, brandIntro.cart],
                [brandIntro.global, brandIntro.special, brandIntro.owner],
            ]
            defaultType = 'global'
        }
        return (
            <div className="shopping-mall-page">
                <Tabs>
                    <Tabs.TabPane tab="微信小程序" key="1">
                        <div className="flex-row-between flex-vertical-top pdt-40 pdb-60">
                            <WechatDesignPageSvg width={320} height={628}/>
                            <div className="pdt-60 mgr-48" style={{width: 500}}>
                                <div className="ft-clr-d ft-28">商城装修</div>
                                <div className="ft-clr-md ft-16 mgt-12 mgb-36">
                                    塑造个性化商城风格。
                                </div>
                                { intro[0].map(item => (
                                    <div className="bd-rds-4 bg-f5 pdt-16 pdl-36 pdb-16 pdr-36 w-100 flex-row-between mgb-16 cur-poi"
                                         onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.wechat, item.type)}
                                    >
                                        <div>
                                            <div className="ft-14">{ item.title }</div>
                                            <div className="ft-12 ft-clr-ml">{ item.content }</div>
                                        </div>
                                        <RightOutlined className="ft-12"/>
                                    </div>
                                )) }
                                <Button className="mgt-24 button-large" type="primary"
                                        onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.wechat, defaultType)}
                                >前往装修</Button>
                            </div>
                        </div>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="抖音小程序" key="2">
                        <div className="flex-row-between flex-vertical-top pdt-40 pdb-60">
                            <TikTokDesignPageSvg width={320} height={628}/>
                            <div className="pdt-60 mgr-48" style={{width: 500}}>
                                <div className="ft-clr-d ft-28">商城装修</div>
                                <div className="ft-clr-md ft-16 mgt-12 mgb-36">
                                    给用户留下印象深刻的商城形象。
                                </div>
                                { intro[1].map(item => (
                                    <div className="bd-rds-4 bg-f5 pdt-16 pdl-36 pdb-16 pdr-36 w-100 flex-row-between mgb-16 cur-poi"
                                         onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.bytedance, item.type)}
                                    >>
                                        <div>
                                            <div className="ft-14">{ item.title }</div>
                                            <div className="ft-12 ft-clr-ml">{ item.content }</div>
                                        </div>
                                        <RightOutlined className="ft-12"/>
                                    </div>
                                )) }
                                <Button className="mgt-24 button-large" type="primary"
                                        onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.bytedance, defaultType)}
                                >前往装修</Button>
                            </div>
                        </div>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="支付宝小程序" key="3">
                        <div className="flex-row-between flex-vertical-top pdt-40 pdb-60">
                            <AlipayDesignPageSvg width={320} height={628}/>
                            <div className="pdt-60 mgr-48" style={{width: 500}}>
                                <div className="ft-clr-d ft-28">商城装修</div>
                                <div className="ft-clr-md ft-16 mgt-12 mgb-36">
                                    塑造个性化商城风格。
                                </div>
                                { intro[2].map(item => (
                                    <div className="bd-rds-4 bg-f5 pdt-16 pdl-36 pdb-16 pdr-36 w-100 flex-row-between mgb-16 cur-poi"
                                         onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.alipay, item.type)}
                                    >>
                                        <div>
                                            <div className="ft-14">{ item.title }</div>
                                            <div className="ft-12 ft-clr-ml">{ item.content }</div>
                                        </div>
                                        <RightOutlined className="ft-12"/>
                                    </div>
                                )) }
                                <Button className="mgt-24 button-large" type="primary"
                                        onClick={this.goDesignDetailPage.bind(this, PLATFORM_MAP.alipay, defaultType)}
                                >前往装修</Button>
                            </div>
                        </div>
                    </Tabs.TabPane>
                </Tabs>
            </div>
        )
    }
}

export default ShoppingMallDesignPage